DML is nested inside all elements. You can put DML inside other DML elements. For example here's a spoiler inside a spoiler inside a spoiler:
[spoiler]
[spoiler]
[spoiler]
*|Very hidden text.|*
[/spoiler]
[/spoiler]
[/spoiler]
Indenting text
Syntax
text
indented text
other text
Only soft tabs will properly be indented and the first indent within a BBCode tag will automatically be remove, and won't become an indent in the output.
Note that indents are treated as any other wrapper around text,
This means that the following won't work:
[p]
text
[/p]
other text
For the same reason that
[p][b]text[/p][b]
won't work. The indent group must be closed, before the paragraph can be closed.
Preview
text
indented text
other text
Paragraphs
Syntax
[p]
Some cool text here
[/p]
[p]
Some more cool text here
[/p]
Preview
Some cool text here
Some more cool text here
Bold text
Pattern :
*text*
BBCode :
[b]text[/b]
Preview : text
Italic text
Pattern :
|text|
BBCode :
[i]text[/i]
Preview : text
Underlined text
Pattern :
_text_
BBCode :
[u]text[/u]
Preview : text
Strikethrough text
Pattern :
~text~
BBCode :
[s]text[/s]
Preview : text
New lines
To insert a new line add a backtick
`
to the end of the line.
Syntax
some line of text`
some new line
Alternatively you can use the newlines bbtag:
[linebreaks]
some
multiline
text
[/linebreaks]
Preview
some line of text
some new line
some multiline text
Comment
Syntax
[[ this is a comment
Comments will not appear in the compiled html document. They are good for documentation as to why you documented something in a certain way or todo lists! For example:
[[ To do list
[[ * Document about great feature x
[[ * Do some other useful thing
...
Note
You cannot really use a comment on the same line as another part of DML. For example:
Some line of dml` [[some amazing comment
another line of dml`
In the above case the back tick will be interprated as a code block instead of a
back tick lead by a comment. This is an inbuilt limitation of how DML works and
would require a complete re-write of the engine to fix.
Headers
Headers are useful for cutting your documentation up into different sections.
When a header is added to the document it will also be added to the index
which can be found in the menu in the top-right corner of the page on small
devices, or towards the right of the page on larger devices.
Syntax
# Header 1
## Header 2
### Header 3
#### Header 4
...
Preview
Header 1
Header 2
Header 3
Header 4
Bullet points
Syntax
* Bullet type 1`
** Bullet type 2`
*** Bullet type 3`
Preview
• Bullet type 1 ○ Bullet type 2 ▪ Bullet type 3
Text allignment
Often it is required to allign text to a specific position of the page.
To do this we have provided some bbcode tags which help allign text to certain
position on the page.
Syntax
[center]Some[/center]
[left]awesome[/left]
[right]text[/right]
Preview
Some
awesome
text
Escaping
Sometimes you might want to add a #, * or some other special character
to the document, to do this just use
\
to escape the special character.
Syntax
\#`
\*`
\\
Preview
#
*
\
Literal strings
Literal strings are used to insert text correctly into html. For example, if [, ] or other special characters are used they may be inserted into the html incorrectly. Instead use the literal tags and these will be converted
to Character Escapes.
Equally any DML code inside a pair of literal tags will be displayed as ordinary text.
Whether or not the image should be styled. Styling an element makes it look like it is hovering over the page by applying a shadow, and places the element in a div with a white background.
String
- name
An optional alias for the picture
Boolean
- showName
If this is set to true, the name will show beneath the picture as a title. By default this attribute is set to false.
Number
- width
Set this value when you want to change the visible width of the picture. Note you can specify whether the picture takes up a fixed width of pixels (default) or a percentage of the width of the available area. To do so use
width=80px
or
width=80%
respectively.
Boolean
- hasPopup
When true, the picture will 'pop up' to show the image in full size, when clicked. The name is also displayed in this pop up window. The default for this attribute is true.
[hiddenSpoilerText]I'm closed, *and can be formatted*![/hiddenSpoilerText]
I'm inside! *and*|can|_be formatted_`too!`
[/spoiler]
Preview
ButtonText
Some cool shown text here!
Close meOpen me
Some cool shown text here!
I'm open!I'm closed, and can be formatted!
I'm inside! andcanbe formatted
too!
Table
Unlike in Markdown tables are designed to be easy to produce from software and easy to read by a human, while looking more like a html table than a real table in code. This is due to the fact that in general with complicated table structures this is much more clear than the likes produced by markdown.
Syntax
[table]
[header]
[column]Column A[/column]
[column]Column B[/column]
[/header]
[row]
[column]1[/column]
[column]a[/column]
[/row]
[row]
[column]2[/column]
[column]b[/column]
[/row]
[row]
[column]3[/column]
[column]c[/column]
[/row]
[/table]
Preview
Column A
Column B
1
a
2
b
3
c
Row
Rows are useful for splitting up data into columns without the same css style as a full blown table.
Syntax
[row]
[column]A Mug[/column][column]other text[/column]
[/row]
Preview
A Mug
other text
LaTeX
LaTeX is a useful language for writing mathematical equations and formula. It is commonly used as a full markup language in the creation of academic papers. Here we can use latex to format equations inside DML.
Syntax
[latex]
x = \left(\frac{2\pi r^2 + \theta}{r-\pi}\right)(r+1)
[/latex]
Preview
x=(r−π2πr2+θ)(r+1)
Advanced DML
HTML
The html tag allows you to write raw HTML into a website. Anything you put
between the tags will not be transpiled at all by the transpiler.
Divs allow you to create a floating box on the page.
Syntax
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor efficitur tempus. Vivamus in ante id mi faucibus eleifend et a odio. Sed venenatis maximus vestibulum.
Nunc tortor sem, ornare vitae ipsum at, molestie vulputate nisl. Sed consectetur augue non arcu mattis, luctus luctus diam cursus. Pellentesque posuere, diam a ultrices tincidunt, nisi nisi vehicula ligula, sed ornare elit tortor quis erat. Nam odio nulla, tempus in orci nec, tincidunt lobortis justo.
Preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor efficitur tempus. Vivamus in ante id mi faucibus eleifend et a odio. Sed venenatis maximus vestibulum.
Some cool floating div here
Nunc tortor sem, ornare vitae ipsum at, molestie vulputate nisl. Sed consectetur augue non arcu mattis, luctus luctus diam cursus. Pellentesque posuere, diam a ultrices tincidunt, nisi nisi vehicula ligula, sed ornare elit tortor quis erat. Nam odio nulla, tempus in orci nec, tincidunt lobortis justo.
Iframe
Iframes, just like in HTML, can be used to display other content on your server, or on outbound servers.
Custom BBCode allows you to hack your own DML elements into existence. Custom BBCode should only
really ever be used for overriding styles however they can be used to do a lot more. See the example syntax.
The general rule is that any name you give inside BBCode will be given to the class of the html
element. This allows you to easily create a custom style with CSS or even custom behaviour with
javascript at runtime.